/* eslint-disable react/no-array-index-key */
import React from 'react';

import { ReactComponent as ChevronRight } from '@/assets/images/auth/ChevronRight.svg';
import cn from 'classnames';

import { Divider } from '../Divider';
import cs from './Options.module.scss';

type Props = {
  isSingle?: boolean;
  children: React.ReactNode;
  withChevrone?: boolean;
  amount: number;
  dividerColor?: string;
  padding?: 'small' | 'medium' | 'big';
  className?: string;
  bg?: string;
};

export const Options = ({
  isSingle,
  dividerColor = '#F3F3F3',
  className,
  withChevrone,
  padding = 'small',
  children,
  amount,
  bg,
}: Props) => {
  const optionsArray = React.Children.toArray(children);

  const options = Array.from({ length: amount }).map((_, index) => {
    const isLastItem = index === amount - 1;
    const isFirstItem = index === 0;
    const optionContent = optionsArray[index % optionsArray.length];

    // @ts-ignore
    const onClickHandler = optionContent.props.onClick;

    return (
      <React.Fragment key={index}>
        <div
          className={cn(
            cs.option,
            padding && cs[padding],
            isLastItem && cs.padding_bottom,
            isFirstItem && cs.padding_top,
          )}
          onClick={onClickHandler}
        >
          {optionContent}
          {withChevrone && <ChevronRight />}
        </div>
        {!isLastItem && (
          <div className={cn(cs.divider, padding && cs[padding])}>
            <Divider color={dividerColor} />
          </div>
        )}
      </React.Fragment>
    );
  });

  return (
    <div className={cn(cs.options, className)} style={{ background: bg || 'white' }}>
      {options}
    </div>
  );
};
